// 通配符选择器--清除所有内标签跟外标签的默认边距，开启內减模式
body,
div,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
p,
dl,
dt,
dd,
a,
img,
button,
form,
table,
th,
tr,
td,
tbody,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

//a标签转换为块级元素，可以设置宽高，取消下划线，字体颜色从父元素那里继承。
a {
    display: block;
    text-decoration: none;
    color: inherit;
}

//将img标签转化为块级元素是为了清除图片与图片之间的默认边距。
img {
    // width: 100%;
    display: block;
}

//取消无序列表ul标签的小圆点
ul {
    list-style: none;
}

//清楚input标签的边框，清楚input标签的点击时的边框
input {
    border: none;
    outline: none;
}

//清楚浮动，当父元素只设置宽度，高度由子元素撑开，而且子元素还浮动的时候，为了不影响下一个容器的布局，需要设置父元素清除浮动
.clearfix::after {
    content: "";
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
    display: block;
}

// 可以通过 $ 声明一个变量保存经常使用的颜色。
$commonColoe:#ccc;

// 然后封装精灵图的步骤,需要使用精灵图的图片只需要调用函数名并输入x、y坐标值就可以使用。
@mixin sprites ($x, $y) {
    // 写精灵图有三步，第一步测量图标的x、y值。第二步在css文件中将整张背景图片写入，第二步使用background-position调整目标图标的X,y值。
    background-image: url("image/jd-sprites.png");
    background-size: 200px 200px;
    background-position: $x $y;
}

// hover 实现效果，但是我就实现了前三个，剩下你自己玩
.content-main-top-oa:hover,
.content-main-top-secondeclass:hover,
.content-main-top-coach:hover,
.content-main-top-educational:hover,
.ontent-main-top-control:hover,
.content-main-foot-matters:hover,
.content-main-foot-ivorys:hover,
.content-main-foot-learnworker:hover,
.content-main-foot-helper:hover,
.content-main-foot-xxxx:hover,
.content-main-top-control:hover
    {
    height: 384px;
    box-shadow: -2px 0px 10px darkgrey, 2px 0px 10px darkgrey;
    border: 1px solid #fff;
    margin: 0px 0px;
    .dec {
        padding-top: 8px;
        padding-left: 10px;
        display: block;
        color: white;
            li:nth-child(1){
              
                text-indent: 2em;
            
            }
         
        
    }
}
